/**
 * Created by 123 on 2017/12/26.
 */
import React from 'react';
import {
  View,
  Text,
  StyleSheet,
  Button,
  FlatList,
  TextInput,
  TouchableOpacity,
  ScrollView
} from 'react-native'
import ScrollableTabView, {DefaultTabBar, } from 'react-native-scrollable-tab-view'
import {List} from 'antd-mobile';
import {Actions} from 'react-native-router-flux';
import {Table, TableWrapper, Row, Rows, Col, Cols, Cell} from 'react-native-table-component';
import Dialog from '../../routes/DialogTip'
import Colors from '../../assets/colors'
import Color from '../../assets/colors';
import Pangitor from '../../routes/Pangitor'
import Loading from '../../components/loading/loading'

export default class TaskList extends React.Component {
  render() {
    const {data,last,page,loading}=this.props;
    const {setEnable, query, resetTaskForm,getClean,setTaskId,dialogText}=this.props;

    return (
          <View style={{backgroundColor: Color.white,}}>
            <Text style={styles.btnText} onPress={() =>Actions.push('masterTaskForm')}>添加任务</Text>
            <ScrollView style={[styles.baseV]}>
              <View style={styles.baseH}>
                <ScrollableTabView
                    tabBarTextStyle={{fontSize: 18}}
                    tabBarUnderlineStyle={{backgroundColor:Color.btnPrimaryBg}}
                    initialPage={0}
                    renderTabBar={() => <DefaultTabBar/>}
                    onChangeTab={(obj) => {
                  getClean();
                  query(obj.i);
                }
              }
                    tabBarActiveTextColor={Color.btnPrimaryBg}>
                  <Text tabLabel='未派发'/>
                  <Text tabLabel='已派发' />
                </ScrollableTabView>
              </View>

                {
                  loading?<Loading />:
                    <View style={styles.baseV}>

                      <ListItem list={data} fun={setEnable} fun1={query} fun2={setTaskId}/>
                        {/*分页控件，mainFunction = 请求列表的方法名字，namespace = 当前namespace ， currentPage = 当前页码， totalPage= 总页数*/}
                      <View style={{marginTop:-70}}>
                        <Pangitor 　mainFunction={'query'} namespace={'masterTaskList'} currentPage={page} totalPage={last} />
                      </View>
                    </View>
                }
              {
                dialogText === ''?null:
                  <Dialog isShow={'true'} text={dialogText}/>
              }

            </ScrollView>
          </View>
    )
  }
}

class ListItem extends React.Component<{}> {
  render() {

    const {list, fun, fun1,fun2} = this.props
    const tableHead = ['工程名称', '任务名称','创建时间',  '操作'];

    let tableData = [];
    list.map((val, index) => {
      let arr = [];
      arr.push(<Text style={{textAlign:'center',fontSize: 18}}>{val.prjName}</Text>)
      arr.push(<Text style={{textAlign:'center',fontSize: 18}}>{val.taskName}</Text>)
      arr.push(<Text style={{textAlign:'center',fontSize: 18}}>{val.date}</Text>)
      arr.push(
        <View>{val.isEnable == 0 ?
          <Text style={{textAlign:'center',color:Color.btnPrimaryBg,fontSize: 18}}
                onPress={()=>{fun(val.id); fun1()}}>派发</Text> :
          <Text style={{textAlign:'center',fontSize: 18,color:Color.btnPrimaryBg,}}
                onPress={() =>{Actions.push('StateTracking'),fun2(val.id)}}>进度查看</Text>}</View>
      );
      tableData.push(arr);
    });
    return (
      <View style={styles.container}>
        <Table borderStyle={{borderWidth: 0.5, borderColor: Colors.tableColor}}>
          <Row data={tableHead} flexArr={[2,2, 2, 1]} style={styles.head} textStyle={styles.text}/>
          <TableWrapper style={{flexDirection: 'row'}}>
            <Rows data={tableData} flexArr={[2,2, 2, 1]} style={styles.row} textStyle={styles.itemText}/>
          </TableWrapper>
        </Table>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  baseV: {
    display: 'flex',
    flexDirection: 'column',
  },
  baseH: {
    display: 'flex',
    flexDirection: 'row',
    backgroundColor: Color.white,
  },
  itemStyle: {
    display: 'flex',
    flexDirection: 'row',
    height: 50,
  },
  line: {
    backgroundColor: Color.navbarBackground,
    height: 1
  },
  BtnLocal: {
    backgroundColor: Color.white,
    paddingBottom: 10,
    paddingLeft: 20,
    paddingRight: 20,
    paddingTop: 20,
    textAlign: 'center',
    width: '100'
  },
  BtnContainer: {
    marginTop: 10,
    marginBottom: 10,
    backgroundColor: Color.white,
    paddingBottom: 10,
    paddingLeft: 20,
    paddingRight: 20,
    flex: 1
  },
  btnText: {
    color: '#fff',
    fontSize: 26,
    borderRadius: 10,
    textAlign: 'center',
    backgroundColor: Color.btnPrimaryBg,
      marginLeft:20,
      marginRight:20,
      marginTop: 10,
      marginBottom: 10,
  },
  container: {paddingLeft: 20, paddingRight: 20, marginBottom: 70, backgroundColor: Color.white,},//marginBottom:30
  text: {textAlign: 'center', color: '#fff', fontSize: 22,},
  itemText: {
    textAlign: 'center',
    fontSize: 19,
    flex: 1,
    marginTop:10,
    marginBottom:10
  },
  row: {
    // height: 48,
    backgroundColor: '#fff'
  },
  head: {height: 50, backgroundColor: Color.navbarBackground,},

  fenye: {
    height: 35,
    paddingBottom: 2,
    paddingLeft: 25,
    paddingRight: 25,
    alignItems: 'center',
    color: '#fff',
    textAlign: 'center',
    backgroundColor: Color.btnPrimaryBg,
    borderRadius: 4,
    fontSize: 25
  },
});